import { useState } from 'react';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const ContextMenu: React.FC = () => {
  const [visible, setVisible] = useState(false);

  const menu = (
    <Menu>
      <Menu.Item key="1">1st menu item</Menu.Item>
      <Menu.Item key="2">2nd menu item</Menu.Item>
      <Menu.Item key="3">3rd menu item</Menu.Item>
    </Menu>
  );
  return (
    <div>
      <Dropdown overlay={menu} visible={visible} trigger={['contextMenu']} onVisibleChange={setVisible}>
        <div>
          ContextMenu
          <span onClick={() => setVisible(true)}>
            <DownOutlined />
          </span>
        </div>
      </Dropdown>
    </div>
  );
};

const Components: React.FC = () => {
  return (
    <div style={{ textAlign: 'left' }}>
      <ContextMenu />
    </div>
  );
};

export default Components;
